<template>
  <div class="head">我要卖</div>
  <div class="shead" v-if="index == '2'">
    <el-input
      v-model="input1"
      style="width: 90%; margin-left: 5%; margin-top: 10px"
      size="large"
      placeholder="请输入游戏名称"
      :prefix-icon="Search"
    />
  </div>
  <div class="btn">
    <button
      v-for="item in buts"
      :key="item.index"
      :class="{ active: item.index == index }"
      @click="index = item.index"
    >
      {{ item.name }}
    </button>
  </div>
  <div class="main" v-if="index == '1'">
    <div>
      <p>全部</p>
      <span>&gt;</span>
    </div>
    <hr />
    <div>
      <p>手机游戏</p>
      <span>&gt;</span>
    </div>
    <hr />
    <div>
      <p>网络游戏</p>
      <span>&gt;</span>
    </div>
    <hr />
    <div>
      <p>其它</p>
      <span>&gt;</span>
    </div>
  </div>
  <div class="smain" v-if="index == '2'">
    <van-tree-select
      v-model:active-id="activeId"
      v-model:main-active-index="activeIndex"
      :items="items"
      @click="router.push('/add')"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const input1 = ref("");
const activeId = ref(0);
const activeIndex = ref(0);
const items = [
  {
    text: "热门",
    children: [
      { text: "王者荣耀", id: 1 },
      { text: "航海王", id: 2 },
      { text: "三国杀", id: 3 },
    ],
  },
  {
    text: "A",
    children: [
      { text: "南京", id: 4 },
      { text: "无锡", id: 5 },
      { text: "徐州", id: 6 },
    ],
  },
  {
    text: "B",
    children: [
      { text: "南京", id: 4 },
      { text: "无锡", id: 5 },
      { text: "徐州", id: 6 },
    ],
  },
  {
    text: "C",
    children: [
      { text: "南京", id: 4 },
      { text: "无锡", id: 5 },
      { text: "徐州", id: 6 },
    ],
  },
  {
    text: "D",
    children: [
      { text: "南京", id: 4 },
      { text: "无锡", id: 5 },
      { text: "徐州", id: 6 },
    ],
  },
];
let index = ref("1");
const buts = ref([
  { name: "出售商品分类", index: "1", isActive: false },
  { name: "出售商品类型", index: "2", isActive: false },
]);
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.shead {
  height: 50px;
  width: 100%;
}
.head {
  height: 50px;
  width: 100%;
  background-color: rgb(207, 19, 34);
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 22px;
}
.btn {
  height: 80px;
  width: 100%;
}
.btn button {
  border: 1px solid;
  display: inline-block;
  height: 40px;
  width: 145px;
  margin-top: 20px;
  font-size: 16px;
  justify-content: space-around;
  border-radius: 5px;
  align-items: center;
  margin-left: 30px;
}

.active:hover {
  background-color: rgb(207, 19, 34);
  color: white;
}

.active {
  /* background: rgb(245, 245, 245); */
  background-color: rgb(207, 19, 34);
  color: white;
}

.main {
  width: 100%;
}
.main div {
  height: 50px;
  width: 90%;
  display: flex;
  margin-left: 5%;
  justify-content: space-between;
  align-content: center;
}
hr {
  width: 90%;
  margin-left: 5%;
  margin-top: 5px;
  margin-bottom: 10px;
}
.main p {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 10px;
}
.main span {
  margin-top: 10px;
  font-size: 20px;
}
</style>